import { useQuery } from "@apollo/client"
import { QueryTestGroupQuery, QueryTestGroupResult } from "../admin/test/page";
import { Image } from "antd";
import { joinPath } from "../../libs/http-fetch";
import { Link } from "react-router";
import { usePath } from "../../hooks/usePath";



const TestPage = () => {
  const groups = useQuery<QueryTestGroupResult>(QueryTestGroupQuery)

  const dataSource = groups.data?.queryTestGroups || [];

  usePath([{ title: "模拟测试" }])
  return (
    <div className="bg-white">
      <div className="h-5"></div>
      {dataSource.map((item) => {
        return (
          <div
            key={item.id}
            className="border-t border-dashed border-black py-2 flex"
          >
            <div className="w-1/2 flex justify-end items-center h-24">
              <Image
                src={joinPath(`/media/group/${item.id}/cover`)}
                width={100}
              />
            </div>
            <div className="w-1/2 h-24 flex text-xl items-center pl-2">
              <Link to={`/test/${item.id}/group`}>
                {item.name}
              </Link>
            </div>
          </div>
        )
      })}
    </div>
  )
}
export default TestPage